<template>
	<view :class="[mode=='listthree'?'listthree':'']">
		<!-- 单例数据 -->
		<view class="bw-lists-body" v-if="mode == 'listOne'">
			<view>
				<image :src="Data.cover_plan"></image>
			</view>
			<view class="bw-lists-describe">
				<text class="bw-lists-title">{{Data.title}}</text>
				<view class="bw-list-depict">
					<text>{{Data.description}}</text>
				</view>
			</view>
		</view>

<!-- 双例数据 -->
		<view class="bw-mode-Manycases" :style="{'margin-bottom':marginBottom + 'rpx'}" v-if="mode == 'listtwo'">
			<image :src="Data.cover_plan"></image>
			<view class="bw-list-depict">
				<text>{{Data.name}}</text>
			</view>
			<view class="bw-Manycases-flex">
				<text :style="{'color':leftColor,'fontSize':leftfontSize + 'rpx'}">{{Data.price}}万</text>
				<text :style="{'color':rightColor,'fontSize':rightfontSize + 'rpx'}">{{Data.type}}</text>
				<text class="bw-lists-title" v-if="Data.title">{{Data.title}}</text>
				<view class="bw-list-depict" v-if="Data.description">
					<text>{{Data.description}}</text>
				</view>
			</view>
		</view>
		
		<!-- 双例数据 -->
		<view class="bw-mode-Manycases" :style="{'margin-bottom':marginBottom + 'rpx'}" v-if="mode == 'listthree'">
			<image :src="Data.image"></image>
				<text class="name">{{Data.title}}</text>
			<view class="bw-list-depict">
				<text>{{Data.description}}</text>
			</view>
			<view class="bw-Manycases-flex">
				<text :style="{'color':leftColor,'fontSize':leftfontSize + 'rpx'}">￥{{parseFloat(Data.price)}}</text>
				<view class="shop-vip-price">
					VIP:{{parseFloat(Data.vip_price)}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'bw-lists',
		props: {
			mode: { //数据模式 单例多例
				type: String,
				default: 'listtwo'
			},
			Data: {
				type: Object,
				default: {}
			},
			leftColor: { //多例左侧字体颜色
				type: String,
				default: '#000000'
			},
			rightColor: { //多例右侧字体颜色
				type: String,
				default: '#000000'
			},
			leftfontSize: { //多例左侧字体大小
				type: Number,
				default: 28
			},
			rightfontSize: { //多例右侧字体大小
				type: Number,
				default: 28
			},
			marginBottom: { //底部边距
				type: Number,
				default: 28
			}
		}
	}
</script>

<style scoped lang="less">
	.bw-lists-body {
		width: 100%;
		background-color: #FFFFFF;
		display: flex;
		padding-top: 20rpx;

		image {
			width: 130rpx;
			height: 130rpx;
			border-radius: 10%;
			margin-left: 50rpx;
		}

		.bw-lists-describe {
			width: 50%;
			padding: 5rpx 20rpx 20rpx 25rpx;

			.bw-lists-title {
				display: block;
				font-weight: 500;
				font-size: 30rpx;
			}

			.bw-list-depict {
				height: 80rpx;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;

				text {
					font-size: 25rpx;
					display: inline;
				}
			}
		}
	}

	.listthree {
		width: 48%;
	}

	.bw-mode-Manycases {
		width: 100%;

		image {
			width: 100%;
			height: 260rpx;
		}
		.name{
			margin-bottom: 10rpx;
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			line-clamp: 1;
			-webkit-box-orient: vertical;
		}
		.bw-list-depict {
			height: 80rpx;
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;

			text {
				font-size: 28rpx;
				display: inline;
				font-weight: 500;
			}
		}

		.bw-Manycases-flex {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.shop-vip-price {
				width: 132rpx;
				height: 40rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				background-color: #039708;
				border-radius: 20rpx 0 20rpx;
				line-height: 40rpx;
				text-align: center;
			}
			text {
				padding-top: 10rpx;
			}
		}
	}
</style>
